<template>
    <div 
        :class="['cvu-card', { 'cvu-card-dishover': !hover, 'cvu-card-border': border }]"
        :style="{ padding: padding }"
    >
        <div class="cvu-card-header" v-if="$slots.header">
            <slot name="header" />
            <cvu-divider v-if="divider" :margin="dividerMargin"></cvu-divider>
        </div>
        <div class="cvu-card-content" v-if="$slots.content">
            <slot name="content" />
        </div>
        <div class="cvu-card-footer" v-if="$slots.footer">
            <cvu-divider v-if="divider" :margin="dividerMargin"></cvu-divider>
            <slot name="footer" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'cvu-card',
    props: {
        // 是否显示边框
        border: {
            type: Boolean,
            default: true
        },
        // 内边距
        padding: {
            type: String,
            default: ''
        },
        // 是否开启hover效果
        hover: {
            type: Boolean,
            default: true
        },
        // 是否显示header/footer分割线
        divider: {
            type: Boolean,
            default: true
        },
        // 分割线外边距 divider为true时生效
        dividerMargin: {
            type: String,
            default: ''
        },
    }
}
</script>
<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-card{
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all .2s;
    &:hover{
        box-shadow: 0 0 5px rgba($color: #000000, $alpha: .2);
    }
    &.cvu-card-dishover{
        &:hover{
            box-shadow: none;
        }
    }
    &.cvu-card-border{
        border: 1px solid #DCDCDC;
    }
    .cvu-card-header{
        position: relative;
        width: 100%;
    }
    .cvu-card-content{
        width: 100%;
    }
    .cvu-card-footer{
        position: relative;
        width: 100%;
    }
}
</style>